<template>
  <div class="md180411-cj-item">
    <div class="title">
      <img src="http://kidtts.tmooc.cn/script/css/rep/img/w_t02.png">
    </div>
    <!-- 学习情况，颜色条 -->
    <div class="content">
      <ul class="md180411-cj-studbar">
        <li class="item" v-for="(statu, index) in stuInfo.statu" :key="index">
          <span class="font-16 cont">{{classInfo.statuStr[index]}}</span>
          <div :class="'bar-bg bar-img w'+statu*20">
            <span class="bar-pro"><img class="bar-icon" :src="'http://kidtts.tmooc.cn/script/css/rep/img/w_jd_0'+statu+'.png'"></span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'statu',
    props: ['grade', 'stuInfo'],
    data () {
      return {
        classInfo: null
      }
    },
    created () {
      let self = this
      self.classInfo = self.$config.classData[self.grade]
    }
  }
</script>

<style scoped>

</style>
